import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem, Button, Toast, Flex,Icon,Tabs,WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { login } from './login.less';
import username from '../../assets/svg/username.svg';
import password from '../../assets/svg/password.svg';
import code from '../../assets/svg/code.svg';
import weixinsvg from '../../assets/img/weixin.svg';
import weibosvg from '../../assets/img/weibo.svg';
import qqsvg from '../../assets/img/QQ.svg';
import { apiURl } from '../../utils/common';
//import { common } from 'common';

const { Item } = List;
const tabs=[
    { title: '忘记密码' },
]

class ForgetPassword extends Component {
    constructor(props) {
        super(props);
        this.state={
            num: 1,
            ret:[]
        }
        // 获取URL参数
        //  if (this.props.location.query) {
        //    if (this.props.location.query.callBack) {
        //      this.callBack = this.props.location.query.callBack;
        //    }
        //  }
    }

    getCode = () => {
        this.setState({
            num:this.state.num+1
        })
    }
    onQuickSubmit=()=>{
        const { mobile ,mobileVerify} = this.props.form.getFieldsValue();
        if (!mobile) {
            Toast.info('请输入手机号', 1.5);
            return;
        }
        if (!mobileVerify) {
            Toast.info('请输入验证码', 1.5);
            return;
        }
        this.props.dispatch({ type: 'login/quickLoginEFF', obj: { mobile,mobileVerify } }).then((r)=>{
            if (r.code == 200) {
                Toast.success(r.msg, 1.5, ()=>{
                    sessionStorage.setItem('token', r.ret.token);
                    this.props.dispatch(routerRedux.replace({
                        pathname: '/',
                    }))
                });
            } else {
                Toast.fail(r.msg, 1.5);
            }
        });
    }
    onSubmit = () => {
        const { password, username, verifyCode } = this.props.form.getFieldsValue();
        if (!username) {
            Toast.info('请输入邮箱/已验证手机', 1.5);
            return;
        }

        if (!verifyCode) {
            Toast.info('请输入验证码',1.5);
            return;
        }


        this.props.dispatch({ type: 'login/recoverEFF', obj: { bound: username, boundcode: verifyCode } }).then((r)=>{
            console.log(r, "忘记密码。。。。。。。。。。。。。。");


            if (r.code == 200) {
                    this.props.dispatch(routerRedux.push({
                    pathname:`/myPhone/${username.replace(/(\\d{3})\\d{4}(\\d{4})/, '$1****$2')}/memberPwd`
                    // pathname:`/memberPwd/${this.props.match.params.data.replace(/(\\d{3})\\d{4}(\\d{4})/, '$1****$2')}`
                }))

                //     Toast.success(r.msg, 1.5, ()=>{
                //         this.props.dispatch(routerRedux.replace({
                //             pathname: '/',
                //         }))
                //     });
            } else {
                Toast.fail(r.msg, 1.5);
            }
        });

        // loginApi.login(this.props.form.getFieldsValue()).then(result => {
        //   if (result.result == 1) {
        //     Toast.success('登录成功');
        //     // 登录成功保存 token
        //     // localStorage.setItem('token', result.data[0].token);
        //     sessionStorage.setItem('token', result.data[0].token);
        //
        //
        //     window.location.href = this.callBack || 'home.html';
        //   } else {
        //     Toast.fail(result.msg, 1.5);
        //   }
        // })
    }
    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        const {veriFyCode=""} = this.props.login.ret
        let { num } = this.state;
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                  className={login}
            >

                <MyScroll>
                    <form style={{width:"90%",margin:"1.5rem auto",boxShadow:"0 0 10px .05rem #999",borderRadius:".1rem"}}>
                        <WingBlank>
                            <Flex justify="end" style={{background:"#fff"}}>
                                <Icon type="cross" style={{color:"#999",width:".6rem",height:".6rem"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.goBack())
                                }}/>
                            </Flex>
                            <Tabs tabs={tabs} initialPage={0}>
                                <List
                                    renderFooter={() => getFieldError('username') && getFieldError('username').join(',')}
                                >
                                    <InputItem
                                        style={{fontSize: '.32rem'}}
                                        {...getFieldProps('username')}
                                        clear
                                        placeholder="请输入邮箱/已验证手机"
                                    ><Icon type={username.id}/></InputItem>
                                    {/* <InputItem {...getFieldProps('password')} placeholder="请输入密码1" type="password" /> */}
                                    <InputItem
                                        style={{fontSize: '.32rem'}}
                                        {...getFieldProps('verifyCode')}
                                        clear onExtraClick={this.getCode}
                                        placeholder="请输入验证码"
                                        extra={
                                            <div>
                                                <img src={`${apiURl}/member/imgcode?num=${num}`}></img>
                                            </div>
                                        }>
                                        <Icon type={code.id}/>
                                    </InputItem>
                                    {/* <Item style={{ backgroundColor: 'unset' }} extra={<Link to="/forgetPassword" style={{ color: '#777' }}>忘记密码?</Link>}><Link to="/reg" style={{ color: '#777' }}>注册账号</Link></Item> */}
                                    <Item style={{ backgroundColor: 'unset', marginTop: '.7rem' }}>
                                        <Button type="primary" onClick={this.onSubmit} style={{borderRadius:".5rem"}}>下一步</Button>
                                    </Item>

                                </List>

                            </Tabs>
                        </WingBlank>


                    </form>
                    {/* <p style={{textAlign:"center"}}>您还可以用以下方式登录</p> */}
                    <Flex justify="around" style={{marginTop:".5rem"}}>
                        {/*
                        <Icon type={weixinsvg.id} style={{width:"1rem",height:"1rem"}}/>
                        <Icon type={qqsvg.id} style={{width:"1rem",height:"1rem"}}/>
                        <Icon type={weibosvg.id} style={{width:"1rem",height:"1rem"}}/>
                        */}
                    </Flex>
                </MyScroll>


            </Flex>
        );
    }
}

export default connect(({ login }) => ({ login }))(createForm()(ForgetPassword));
